<template>
  <div>
    <div class="box">
      <van-nav-bar left-arrow style="background: blue" class="header_bar">
        <template #left>
          <van-icon name="arrow-left" color="#fff" size="20" />
        </template>
        <template #title>
          <span style="color: #fff">新增拜访信息</span>
        </template>
        <template #right>
          <van-icon name="wap-home-o" color="#fff" size="25" />
        </template>
      </van-nav-bar>

      <div class="cards">
        <div class="cards_left" @click="cardCust">
          <div class="bjt">
            <img src="../assets/头像.png" alt="" />
          </div>
          <div class="ct">
            <div>
              名称:<span>{{ headers.custName }}</span>
            </div>
            <div style="font-size: 0.8rem">
              电话:<span>{{ headers.telephone }}</span>
            </div>
          </div>
        </div>
        <span class="cards_user" style="font-size: 0.8rem">客户信息</span>
      </div>
    </div>

    <div style="border-top: 1px solid #ccc">
      <van-tabs v-model="active">
        <van-tab>
          <template #title> 收入分析 </template>
          <LncomeAnalysis
            :id="this.$route.params.val.id"
            :headers="this.headers"
          />
        </van-tab>
        <van-tab>
          <template #title> 旗下企业 </template>
          <Subsidiaries :id="this.$route.params.val.id" />
        </van-tab>
        <van-tab>
          <template #title> 合作伙伴 </template>
          <Partner :id="this.$route.params.val.id" />
        </van-tab>
        <van-tab>
          <template #title> 当年收入 </template>
          <TheIncome :id="this.$route.params.val.id" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import LncomeAnalysis from "@/components/LncomeAnalysis";
import Subsidiaries from "@/components/Subsidiaries";
import Partner from "@/components/Partner";
import TheIncome from "@/components/TheIncome";
import { getCustView } from "@/request/api";
export default {
  data() {
    return {
      active: 0,
      headerObj: {},
      headers: {},
    };
  },
  created() {
    this.headerObj = this.$route.params.val;
    getCustView({
      id: this.$route.params.val.id,
    }).then((res) => {
      // console.log("在这", res.data);
      this.headers = res.data;
      console.log("headers", this.headers);
    });
  },
  methods: {
    cardCust(){
      this.$router.push({path:'/customerdatas',query:{id:this.headers.id}})
    }
  },
  components: {
    LncomeAnalysis,
    Subsidiaries,
    Partner,
    TheIncome,
  },
};
</script>

<style scoped>
.box {
  position: relative;
}
.header_bar {
  width: 100%;
  height: 10rem;
}
.cards {
  width: 85%;
  height: 6rem;
  background: #fff;
  position: absolute;
  z-index: 9999;
  bottom: 0;
  left: 1.8rem;
  border-radius: 6% 6% 0 0;
  padding: 0.8rem 0 0 0.8rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.cards_left {
  display: flex;
}
.bjt {
  width: 30%;
  /* width: 100%;
  height: 100%;
  background: url("../assets/头像.png") 100% 100% no-repeat; */
}
.bjt img {
  width: 100%;
}
.cards_user {
  height: 1.2rem;
  color: #fff;
  background: orange;
  padding: 0.1rem;
  border-radius: 30% 0 0 30%;
}
.ct {
  margin: 0.8rem 0 0 0.8rem;
}
</style>
